<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <%@ include file="head.jsp" %>
        <%@ include file="jquery.jsp" %>
    </head>
    <body class="mainframe bgcolor1" >
        <h2>
            <c:forTokens items="newest frequent recent alphabetical" delims=" " var="cat" varStatus="loopStatus">
                <c:if test="${loopStatus.count > 1}">&nbsp;|&nbsp;</c:if>
                <c:url var="url" value="home.view">
                    <c:param name="listType" value="${cat}"/>
                </c:url>

                <c:choose>
                    <c:when test="${model.listType eq cat}">
                        <span class="headerSelected"><fmt:message key="home.${cat}.title"/></span>
                    </c:when>
                    <c:otherwise>
                        <span class="header"><a href="${url}"><fmt:message key="home.${cat}.title"/></a></span>
                    </c:otherwise>
                </c:choose>

            </c:forTokens>
        </h2>

        <%@ include file="homePager.jsp" %>
        
        <table style="width: 100%">
            <tr>
                <td style="vertical-align:top;">
                
                    <table cellspacing="5" cellpadding="5">
                        <c:forEach items="${model.elements}" var="element" varStatus="loopStatus">

                            <c:if test="${loopStatus.count % 5 == 1}">
                                <tr>
                            </c:if>

                             <td style="vertical-align:top;">
                                <div class="elementThumb" align="center">
                                    <c:import url="coverArt.jsp">
                                        <c:param name="coverArtId" value="${element.id}"/>
                                        <c:param name="coverArtCaption" value="${element.name}"/>
                                        <c:param name="coverArtSize" value="150"/>
                                        <c:param name="showLink" value="true"/>
                                        <c:param name="showZoom" value="false"/>
                                        <c:param name="showChange" value="false"/>
                                        <c:param name="appearAfter" value="${loopStatus.count * 30}"/>
                                    </c:import>

                                    <div class="detail">
                                        <c:if test="${model.listType eq 'frequent' and not empty element.playCount}">
                                            <fmt:message key="home.playcount"><fmt:param value="${element.playCount}"/></fmt:message>
                                        </c:if>
                                        <c:if test="${model.listType eq 'recent' and not empty element.lastPlayed}">
                                            <fmt:formatDate value="${element.lastPlayed}" dateStyle="short" var="lastPlayedDate"/>
                                            <fmt:message key="home.lastplayed"><fmt:param value="${lastPlayedDate}"/></fmt:message>
                                        </c:if>
                                        <c:if test="${model.listType eq 'newest' and not empty element.created}">
                                            <fmt:formatDate value="${element.created}" dateStyle="short" var="creationDate"/>
                                            <fmt:message key="home.created"><fmt:param value="${creationDate}"/></fmt:message>
                                        </c:if>
                                    </div>

                                    <c:choose>
                                        <c:when test="${empty element.name}">
                                            <div class="detail"><fmt:message key="common.unknown"/></div>
                                        </c:when>
                                        <c:otherwise>
                                            <c:if test="${element.metaData.audioDirectory or element.parentName != element.name}">
                                                <div class="detail"><b><str:truncateNicely lower="22" upper="22">${element.parentName}</str:truncateNicely></b></div>
                                            </c:if>
                                            
                                            <c:url value="main.view" var="parentUrl">
                                                <c:param name="id" value="${element.id}"/>
                                            </c:url>
                                                
                                            <div class="detail"><b><a href="${parentUrl}"><str:truncateNicely lower="22" upper="22">${element.name}</str:truncateNicely></a></b></div>
                                        </c:otherwise>
                                    </c:choose>
                                </div>
                            </td>
                        </c:forEach>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>
